<template>
  <page-frame>
    <div class="bedDetailInfo">
      <div class="toptitle">
        <div class="left">床位监护 - <span>{{personalData.bedNo}}</span> 床</div>
        <div class="right">
          <div class="btns">
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="content">
        <el-row>
          <el-col :span="12">
            <table cellpadding="0" cellspacing="0" border="1" width="0" style="background:#eef1f6;width:100%;border-right-width: 0px;" class="selfMadeTable">
              <tr>
                <th>床位</th>
                <td style="border-right-width:0;width:60%;">{{personalData.bedNo}}</td>
              </tr>
              <tr>
                <th>设备编号</th>
                <td style="border-right-width:0;">{{personalData.deviceNo}}</td>
              </tr>
              <tr style="background-color:#fff;">
                <th style="border-right-width:0;"></th>
                <td style="border-right-width:0;border-left-width: 0px;"></td>
              </tr>
              <tr>
                <th style="border-right-width:0;">会员姓名</th>
                <td style="border-right-width:0;">{{personalData.memberName}}</td>
              </tr>
              <tr>
                <th >照护等级</th>
                <td style="border-right-width:0;">{{personalData.careLevel}}</td>
              </tr>
            </table>
          </el-col>
          <el-col :span="12" style="margin-left:-1px;">
            <table cellpadding="0" cellspacing="0" border="1" width="0" style="background:#eef1f6;width:100%;border-left-width:0px;" class="selfMadeTable">
              <tr style="color:red;">
                <th style="background-color:#fff;">{{personalData.deviceBedStatusDesc}}</th>
                <td >持续时长： {{personalData.continueTimes}} 分钟</td>
              </tr>
              <tr >
                <th>设备类型</th>
                <td style="width:60%;">{{personalData.deviceTypeName}}</td>
              </tr>
              <tr >
                <th style="border-right-width:0;background-color: #fff;border-left-width:0;"></th>
                <td style="border-left-width: 0px;"></td>
              </tr>
              <tr>
                <th>紧急联系人</th>
                <td >{{personalData.contactName}}</td>
              </tr>
              <tr>
                <th>紧急联系方式</th>
                <td >{{personalData.contactPhone}}</td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </div>
      <div class="contentRecord">
        <div class="panel">
          <div class="panel-title first">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">报警记录</div>
              </el-col>
            </el-row>
          </div>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="warnTime"
              label="报警时间"
              width="">
            </el-table-column>
            <el-table-column
              prop="warnTypeName"
              label="报警类型"
              width="">
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="会员姓名">
            </el-table-column>
            <el-table-column
              prop="continueTimes"
              label="持续时长">
            </el-table-column>
            <el-table-column
              prop="confirmEmTime"
              label="确认员工/时间">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注内容">
            </el-table-column>
          </el-table>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

    </div>
  </page-frame>
</template>

<script>
  import bedGuardApi from '../../service/healthManagement/bedGuardApi';
  export default{
    data(){
      return{
        currentDeviceId:null,
        personalData:{
          bedNo:'',
          deviceNo:'',
          deviceTypeName:'',
          memberName:'',
          contactName:'',
          careLevel:'',
          contactPhone:''
        },
        tableData:[],
        total:0,
        currentPage:1,
      }
    },
    methods:{
      init(){
        this.currentDeviceId = this.$route.params.deviceId;
        this.getDetailInfo();
        this.getAlarmRecord(1);
      },

      getDetailInfo(){
        let self = this;
        bedGuardApi.getOutBedInduction(self.currentDeviceId).then(
          (response)=>{
            self.personalData = response.data.data;
          }
        );
      },

      getAlarmRecord(pageNum){
        let self = this;
        bedGuardApi.getAlarmRecord(10,pageNum,self.currentDeviceId).then(
          (response)=>{
            self.tableData = response.data.data.list;
            self.total = response.data.data.total;
            for(var value of self.tableData){
              value.confirmEmTime = (value.confirmEmName==''?'':value.confirmEmName+ "/" +value.confirmTime.substring(0,16));
              value.continueTimes = (value.continueTimes==''?'':value.continueTimes+'分钟');
            }
          }
        );
      },

      back(){
        this.$router.push({name:'outBedInduction'});
      },

      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.getAlarmRecord(this.currentPage);
      },
    },
    mounted:function(){
      this.init();
    },
  }
</script>

<style>
.bedDetailInfo .selfMadeTable tr th,
.bedDetailInfo .selfMadeTable tr td{
  height:40px;
  text-align:center;
}
.bedDetailInfo .selfMadeTable tr td{
  background-color:#fff;
}
.bedDetailInfo .content{
  padding:0 100px;
}
.bedDetailInfo .contentRecord{
  padding:0 40px;
  margin-top:24px;
}
</style>
